<template>
  <div class="page">
    <el-amap
      ref="map"
      vid="amap"
      class="map"
      :zoom="map.zoom"
      :amap-manager="amapManager"
      :center="map.center"
      :events="map.events"
      :plugin="plugins"
    >
      <div class="search">
        <el-amap-search-box
          class="search-box"
          :default="searchValue"
          :search-option="searchOption"
          :on-search-result="searchResultAction"
        >
        </el-amap-search-box>
      </div>

      <el-amap-marker :position="[cLng, cLat]"></el-amap-marker>

      <div class="bottom-bar">
        <van-button
          class="bottom-bar-btn"
          block
          size="large"
          color="#D58913"
          type="info"
          text="确认选择"
          @click="submitAction"
        />
      </div>
    </el-amap>
  </div>
</template>

<script>
import VueAMap from 'vue-amap'

const amapManager = new VueAMap.AMapManager()
export default {
  data() {
    let _this = this
    return {
      route: {},
      amapManager,
      plugins: [],
      markerList: [],
      searchOption: {
        // 限制搜索城市的范围
        city: '大连市',
        citylimit: true,
      },
      cLng: 0,
      cLat: 0,
      markers: [],
      formData: {},
      mapAddress: '',
      searchValue: '',
      current: {},
      map: {
        zoom: 10,
        center: [121.614786, 38.913962],
        events: {
          zoomchange: () => {
            // this.zoomchange()
          },
          click: (e) => {
            this.clickMap(e)
          },
        },
      },
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.route = this.$route.query
    this.init()
  },
  methods: {
    init() {
      const tempFamilyData = localStorage.getItem('tempFamilyData')
        ? JSON.parse(localStorage.getItem('tempFamilyData'))
        : {}
      if (tempFamilyData.lat && tempFamilyData.lng) {
        this.cLng = tempFamilyData.lng
        this.cLat = tempFamilyData.lat
      }
    },
    clickMap(e) {
      let { lng, lat } = e.lnglat
      this.cLng = lng
      this.cLat = lat
      // 这里通过高德 SDK 完成。
      let geocoder = new AMap.Geocoder({
        radius: 1000,
        extensions: 'all',
      })
      geocoder.getAddress([lng, lat], (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          if (result && result.regeocode) {
            this.mapAddress = result.regeocode.formattedAddress
            this.current = { lng, lat, address: this.mapAddress }
            console.log('点击：', this.current)
          }
        }
      })
    },
    searchResultAction(pois) {
      if (pois && pois.length > 0) {
        //如果长度为1则无需转化
        const poi = pois[0]
        const { lng, lat, address } = poi
        this.cLng = lng
        this.cLat = lat
        this.map.center = [lng, lat]
        this.map.zoom = 15
        this.current = { lng, lat, address }
        console.log('当前搜索', this.current)
      }
    },
    submitAction() {
      if (this.$common.xeUtils.isEmpty(this.current)) {
        this.$toast('请选择点位')
        return
      }
      if (this.route.type == 'family') {
        localStorage.setItem('familyLoc', JSON.stringify(this.current))
      } else if (this.route.type == 'health') {
        localStorage.setItem('healthLoc', JSON.stringify(this.current))
      }
      this.$router.go(-1)
    },
  },
}
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  height: 100vh;
  overflow-y: hidden;
}
.map {
  width: 100%;
  height: 110vh;
  position: relative;

  .search {
    position: absolute;
    top: 25px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .bottom-bar {
    position: absolute;
    bottom: 10vh;
    width: 100%;
  }
}
</style>
